<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			用户管理 / 用户管理
		</view>
		<view class="body">
			<view class="class-manage-top">
				<view class="">
					<search-input placeholder="输入手机号/姓名搜索" v-model="keyword" @onclick="onSearch" ></search-input>
				</view>
				<view class="">
					<u-button type="primary" size="mini" @click="goUrl('./add')" >
						<text class="iconfont icon-shuliang-zengjia"></text>
						<text> &nbsp;新增用户</text>
					</u-button>
				</view>
			</view>
			<u-table class="u-table-senior" >
				<u-tr style="margin-right:15px;" >
					<u-th class="u-table-th"> 用户头像 </u-th>
					<u-th class="u-table-th">姓名</u-th>
					<u-th class="u-table-th">性别</u-th>
					<u-th class="u-table-th">手机号</u-th>
					<u-th class="u-table-th">所在城市</u-th>
					<u-th class="u-table-th" width="70px"  >
						用户状态
					</u-th>
					<u-th class="u-table-th" width="70px"  >
						是否技师
					</u-th>
					<u-th class="u-table-th">注册时间</u-th>
					<u-th  width="210px" >操作</u-th>
				</u-tr>
				<view class="u-table-senior-body" style="height:65vh" >
					<u-empty text="暂无内容" mode="data" v-if="nullData" ></u-empty>
					<loaders v-if="data==0 && !nullData"></loaders>
					<u-tr  v-for="(item,index) in data" :key="index"
						class="u-table-tr"
					>
						<u-td class="u-table-td" >
							<view class="flex-layout">
								<u-image width="40px" height="40px" :src="item.head_image"
									@click="eventImage(item.head_image)"></u-image>
							</view>
						</u-td>
						<u-td class="u-table-td">
							<heightText :textContetn="item.name" :textTitle="keyword" ></heightText>
						</u-td>
						<u-td class="u-table-td">
							{{item.sex?item.sex:'未知'}}
						</u-td>
						<u-td class="u-table-td">
							<heightText :textContetn="item.mobile || '暂未设置'" :textTitle="keyword" ></heightText>
						</u-td>
						<u-td class="u-table-td">
							{{item.location?item.location.title:'暂未填写'}}
						</u-td>
						<u-td class="u-table-td" width="70px" :style="!item.status.value?'':'color:red'" >
							{{item.status.text}}
						</u-td>
						<u-td class="u-table-td" width="70px"  >
							{{ !item.is_technician ?'用户':'技师' }}
						</u-td>
						<u-td class="u-table-td">
							<uni-dateformat :date="item.create_date.time_stamp" ></uni-dateformat>
						</u-td>
						<u-td class="u-table-td " width="210px">
							<view class="u-table-td-util">
								<u-button size="mini" type="primary" @click="update(item._id)" >
									<text class="iconfont icon-xiugai"></text>
									<text>修改</text>
								</u-button>
								<u-button size="mini" type="primary" @click="goUrl('./detail?uid='+item._id)" >
									<text class="iconfont icon-chakan"></text>
									<text>详情</text>
								</u-button>
								<u-button size="mini" type="error" @click="removeData(item,index)" >
									<text class="iconfont icon-lajitong"></text>
									<text>删除</text>
								</u-button>
							</view>
							
						</u-td>
					</u-tr>
				</view>
				<view class="u-table-senior-pagination">
					<uni-pagination @change="enventPages" :total="count"></uni-pagination>
				</view>
			</u-table>
		</view>
	</view>
	<u-toast ref="uToast" />
</template>

<script>
	const global = uniCloud.importObject("global",{customUI:true});
	const collectionName = 'userinfo' ;
	export default {
		data() {
			return {
				data:[],
				loading:false,
				nullData:false,
				where:{},
				// 分页
				limit:10,
				skip:0,
				count:0,
				keyword:'',// 关键词搜索
			};
		},
		onLoad() {
			this.getData() ;
		},
		methods:{
			getData(){
				 this.nullData = false;
				let filed = "mobile,create_date,_id,name,head_image,sex,birthday,status,classify,location,id_card,is_technician";
				global.getList(collectionName,this.where,"create_date.time_stamp desc",filed,this.skip,this.limit).then(result => {
					const data = result.data ;
					this.data = data;
					this.count = result.count;
					this.loading = false ;
					if(  data.length==0 )return this.nullData = true;
				})
			},
			// 删除数据
			removeData(item,index){
				const USER_ID = uni.getStorageSync('uni-id-pages-userInfo')._id;
				uni.showModal({title:"您确认删除吗?",content:"数据删除后不可回复,请慎重"}).then(res =>  {
					if(!res.confirm) return ;
					if(!item._id) return ;
					this.loading = true ;
 					let deleteFile = [
						item.head_image?item.head_image:'',
						item.id_card?item.id_card.card_zheng?item.id_card.card_zheng:'' :'',
						item.id_card?item.id_card.card_fan?item.id_card.card_fan:'':''
					];
					global.deleteData(collectionName,{_id:item._id},deleteFile).then(res =>  {
						if(res.affectedDocs == 1){
							this.$refs.uToast.show({
								title:'删除成功',type: 'success',duration:500,position:'top',
								callback:()=>{
									this.data.splice(index,1);
									this.loading = false;
								}
							})
						}else {
							this.loading = false;
							this.$refs.uToast.show({title:result.message,type: 'error',duration:2000,position:'top' })
						}
					})
				})
			},
			// 修改管理员
			update(uid){
				uni.navigateTo({url:'./update?uid='+uid})
			},
			// 搜索
			onSearch(){
				this.loading = true;
				const nameVal = this.keyword
				// 合并查询条件
				let MergeWhere = {};
				// 构建搜索条件
				let search = {
					$or: [
						{ 	'mobile': {$regex: '.*' + nameVal + '.*',$options: 'i'} 		},
						{ 	'name': {$regex: '.*' + nameVal + '.*',$options: 'i'} 		},
					]
				};
				this.where = Object.assign(MergeWhere, search) ;
				this.getData();
			},
			// 分页
			enventPages(val){
				this.loading = true
				this.skip = ( val.current-1) * 10 ;
				this.getData()
			},
			// 图片放大
			eventImage(image) {
				uni.previewImage({
					urls: [image],
				});
			},
			goUrl(url){
				uni.navigateTo({url})
			},
		}
	}
</script>

<style lang="scss">
	.class-manage-top{
		display: flex;
		gap:10px;
		padding:5px 20px ;
		justify-content:flex-end;
	}
</style>
